<template>
  <div class="forget">
    <h1 class="title">修改密码</h1>
    <div class="box">
      <div class="wrapper">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-position="right"
          label-width="120px"
          hide-required-asterisk
        >
          <el-form-item label="手机号码：" prop="phone">
            <el-input
              ref="phone"
              v-model="form.phone"
              clearable
              size="medium"
              tabindex="1"
              placeholder="请输入手机号码"
            />
          </el-form-item>
          <el-form-item class="code" label="验证码：" prop="code">
            <el-input
              v-model="code"
              size="medium"
              tabindex="2"
              :maxlength="4"
              placeholder="请输入验证码"
            ><template slot="suffix"><el-image style="width: 70px; height: 30px" :src="codeImg" fit="fit" @click="changeCodeImg" /></template></el-input>
          </el-form-item>
          <el-form-item label="短信验证码：" prop="code">
            <el-input
              ref="phoneCode"
              v-model.number="form.phoneCode"
              size="medium"
              tabindex="3"
              placeholder="请输入短信验证码"
            ><template slot="suffix"><el-link :underline="false" :disabled="code.length !== 4" type="primary" tabindex="4">获取短信验证码</el-link></template></el-input>
          </el-form-item>
          <el-form-item label="设置新密码：" prop="password">
            <el-input
              :key="passwordType"
              ref="password"
              v-model="form.password"
              :type="passwordType"
              placeholder="请输入密码"
              name="password"
              tabindex="5"
              autocomplete="on"
            >
              <span slot="suffix" class="show-pwd" @click="showPwd">
                <svg-icon
                  :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
                />
              </span>
            </el-input>
          </el-form-item>
          <el-form-item label="重复新密码：" prop="password1">
            <el-input
              :key="passwordType1"
              ref="password1"
              v-model="form.password1"
              :type="passwordType1"
              placeholder="请再次输入新密码"
              name="password1"
              tabindex="6"
              autocomplete="on"
            >
              <span slot="suffix" class="show-pwd" @click="showPwd1">
                <svg-icon
                  :icon-class="passwordType1 === 'password' ? 'eye' : 'eye-open'"
                />
              </span>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" tabindex="7" @click="onSubmit">确 认</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { validPhone, validPassword, validPureNum } from '@/utils/validate';
export default {
  name: 'PasswordForget',
  data() {
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6 || value.length > 20) {
        callback(new Error('密码长度在6到20个数之间'));
      } else if (!validPassword(value)) {
        callback(new Error('密码中必须包含字母、数字'));
      } else {
        callback();
      }
    };
    const validatePhoneNum = (rule, value, callback) => {
      if (!validPhone(value)) {
        callback(new Error('请输入正确的手机号码'));
      } else {
        callback();
      }
    };
    const validateVerCode = (rule, value, callback) => {
      if (!validPureNum(value) || value.length !== 6) {
        callback(new Error('请输入正确的手机验证码'));
      } else {
        callback();
      }
    };
    const validatePassword1 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.form.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      form: {
        phone: '',
        password: '',
        password1: '',
        phoneCode: ''
      },
      code: '',
      codeImg: '',
      passwordType: 'password',
      passwordType1: 'password',

      rules: {
        phone: [
          { required: true, trigger: 'blur', validator: validatePhoneNum }
        ],
        phoneCode: [
          { required: true, trigger: 'blur', validator: validateVerCode }
        ],
        password: [
          { required: true, trigger: 'blur', validator: validatePassword }
        ],
        password1: [
          { required: true, trigger: 'blur', validator: validatePassword1 }
        ]
      }
    };
  },
  methods: {
    changeCodeImg() {},
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = '';
      } else {
        this.passwordType = 'password';
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    showPwd1() {
      if (this.passwordType1 === 'password') {
        this.passwordType1 = '';
      } else {
        this.passwordType1 = 'password';
      }
      this.$nextTick(() => {
        this.$refs.password1.focus();
      });
    },
    onSubmit() {}
  }
};
</script>
<style lang="scss" scoped>
	.forget{
    font-size: $fontSizeBase;
    color: $textColorDark;
    background-color: #fff;
    .box{
      padding-top: 70px;
      display: flex;
      justify-content: center;
      min-height: calc(100vh - 255px);
    }
    /deep/ .el-input{
      width: 355px;
    }
    /deep/ .el-input__suffix{
      padding-right: 10px;
    }
    .code{
      /deep/ .el-input__suffix,
      /deep/ .el-input__suffix-inner{
        display: flex;
        align-items: center;
        cursor: pointer;
      }
    }
  }
</style>
